<template>
    <el-table :data="userlist" style="width: 100%" v-loading="loading">
        <el-table-column prop="userid" label="编号" width="200" />
        <el-table-column prop="username" label="用户名" width="100" />
        <!-- <el-table-column prop="password" label="密码" width="180"  /> -->
        <el-table-column prop="tel" label="电话" width="120" />
        <el-table-column prop="telcode" label="电话代码" width="120" />
        <el-table-column prop="nickname" label="昵称" width="100" />
        <el-table-column prop="avatar" label="avatar" width="200" />
        <el-table-column prop="createTime" label="createTime" width="180" />
    </el-table>
</template>
  
<script setup lang="ts">
// 插件
import {
    Delete,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css'
import { reactive, ref } from "vue";
import service from "../../../ulit/service";
const loading = ref(true)
interface Iuserlist {
    "userid": string,
    "username": string,
    // "password": string,
    "tel": string,
    "telcode": string,
    "nickname": string,
    "avatar": string,
    "createTime": number,
}

// 1、定义轮播图数据
let userlist = reactive<Iuserlist[]>([]);
// 2、获取所有数据
const getuserlist = () => {
    service({
        url: "/user/list"
    })
        .then((res: any) => {
            if (res.data.code === "200") {
                // bannerlist = res.data.data;
                userlist.length = 0
                userlist.push(...res.data.data);
                loading.value = false
            }
        })
}
getuserlist()
</script>
  
<style scoped>
.img {
    width: 200px;
    height: 150px;
}
</style>